<template>
	<el-main class="nopadding" style="overflow: hidden;background-color: transparent;">
		<el-row :gutter="15">
			<el-col :lg="8">
				<el-card shadow="never" style="margin: 0px; padding: 0px;">
					<jd-statistic title="已发布应用" :value="appData.appTotal" suffix="个" groupSeparator>
						本月新发布<span style="margin:0px 5px">{{appData.monthApp}}</span>个
					</jd-statistic>
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never" style="margin: 0px; padding: 0px;">
					<jd-statistic title="总使用次数" :value="appData.useTotal" suffix="次" groupSeparator>
						截止:{{appData.deadline}}
					</jd-statistic>
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never" style="margin: 0px; padding: 0px;">
					<jd-statistic title="应用流程数量" :value="appData.flowTotal" suffix="个" groupSeparator>
						共完成了<span style="margin:0px 5px">{{appData.examineTotal}}</span>次审批
					</jd-statistic>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	import jdStatistic from '@/components/jdStatistic';
	export default {
		title: "数据统计",
		icon: "el-icon-setting",
		description: "点个星星支持一下",
		components: {
			jdStatistic
		},
		props:{
			data:Object
		},
		watch:{
			data:{
				handler(){
					if (typeof(this.data) != 'undefined'){
						this.appData = this.data;
					}
				},
				deep:true
			}
		},
		data() {
			return {
				trendValue1: 7.7,
				trendValue2: -18.9,
				appData:{
					appTotal:0,
					monthApp:0,
					useTotal:0,
					deadline:null,
					flowTotal:0,
					examineTotal:0
				}
			}
		},
		created() {
		}
	}
</script>

<style scoped>
	.item-background p {color: #999;margin-top:10px;line-height: 1.8;}
	.el-card {margin-bottom: 15px;}
	.up {color: #F56C6C;margin-left: 5px;}
	.down {color: #67C23A;margin-left: 5px;}
</style>
